<template>
  <div id="cqd">
    <el-row>
      <el-table :data="table.data">
        <el-table-column type="index" label="序号"  width="70" show-overflow-tooltip></el-table-column>
        <el-table-column prop="area" label="地区" show-overflow-tooltip></el-table-column>
        <el-table-column label="煤矿名称" prop="mineName" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mineStatus" min-width="100" label="矿井状况" show-overflow-tooltip></el-table-column>
        <el-table-column prop="scMonth" label="生产月份" show-overflow-tooltip></el-table-column>
        <el-table-column prop="hdcn" label="核定产能" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ycl" label="月产量（吨）" min-width="110" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dydh" label="单月电耗（度）" min-width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="dd" min-width="140" label="当月单耗（度/吨）" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" min-width="100" label="状态" show-overflow-tooltip>
          <template v-slot:default="{ row }">
            <span v-if="row.status=='预警'" style="color:red">预警</span>
            <span v-else>{{row.status}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template v-slot:default="{ row }">
            <div>
              <i class="fas fa-chart-line fa-2x" @click="showCurve(row)" style="cursor: pointer"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 分页信息栏 -->
    <el-row class="pagination-bar">
      <el-col :span="8" class="page-info">显示第&nbsp;1&nbsp;至&nbsp;10&nbsp;项结果，共&nbsp;10&nbsp;项</el-col>
      <el-col :span="16" class="text-right">
        <el-pagination
          layout="prev,pager,next,jumper"
          :total="table.total"
          :current-page.sync="table.currentPage"
          :page-size="table.pageSize"
          @current-change="initData"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 曲线弹框 -->
    <local-dialog
      :title="diaCurve.title"
      width="80%"
      :visible.sync="diaCurve.show"
      :close-on-click-modal="false"
      v-if="diaCurve.show"
    >
      <vae-echarts height="35vh" :options="zhe1"></vae-echarts>
      <vae-echarts height="35vh" :options="zhe2"></vae-echarts>
      <vae-echarts height="35vh" :options="zhe3"></vae-echarts>
    </local-dialog>
  </div>
</template>
<script>
export default {
  props: {
    cnlcode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      diaCurve: { title: "", show: false },
      zhe1: {},
      zhe2: {},
      zhe3: {},
      table: {
        data: [], //数据
        total: 0, //总条数
        currentPage: 1, //当前页码
        pageSize: 10 //每页条数
      }
    };
  },
  mounted() {
    this.initData();
  },
  created() {},
  computed: {
    // 数据起点
    currentStart() {
      return this.table.total == 0
        ? 0
        : (this.table.currentPage - 1) * this.table.pageSize + 1;
    },
    // 数据终点
    currentEnd() {
      return this.currentStart == 0
        ? 0
        : this.currentStart + this.table.pageSize - 1 > this.table.total
        ? this.table.total
        : this.currentStart + this.table.pageSize - 1;
    }
  },
  methods: {
    showCurve(row) {
      this.diaCurve.show = true;
      this.diaCurve.title = "曲线";
      this.request({
        url: "data/getData/3.3",
        method: "get"
      }).then(data => {
        this.initzhe(data.data);
      });

      this.request({
        url: "data/getData/3.4",
        method: "get"
      }).then(data => {
        this.initzhe1(data.data);
      });

      this.request({
        url: "data/getData/3.5",
        method: "get"
      }).then(data => {
        this.initzhe2(data.data);
      });
    },
    initzhe(data) {
      this.zhe1 = {
        title: {
          text: "近半年产量及电耗情况",
          textStyle: { fontSize: 25 },
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right"
        },
        //         padding: [5, 10, 5, 5], //设置标题内边距,上，右，下，左
        grid: {
          bottom: 80,
          right: "5%"
        },

        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          itemHeight: 15,
          itemWidth: 25,
          data: ["产量（吨）", "电耗（度）"],
          textStyle: { fontSize: 18, fontWeight: "bold" },

          left: 10
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.months,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: { fontSize: 18 },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            },
            name: "产量（吨）",
            type: "value"
            //             max: 500
          },
          {
            nameTextStyle: { fontSize: 18 },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            },
            name: "电耗（度）",
            //             max: 500,
            type: "value"
          }
        ],
        series: [
          {
            name: "产量（吨）",
            type: "line",
            itemStyle: { color: "#00e500" },
            lineStyle: {
              width: 3,
              color: "#00e500"
            },
            emphasis: {
              focus: "series"
            },

            data: data.cl
          },
          {
            name: "电耗（度）",
            type: "line",
            yAxisIndex: 1,

            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.dh
          }
        ]
      };
    },
    initzhe1(data) {
      this.zhe2 = {
        title: {
          text: "近半年下井人次情况",
          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right",
          textStyle: { fontSize: 25 }
        },
        grid: {
          bottom: 80,
          right: "5%"
        },

        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          itemHeight: 15,
          itemWidth: 25,
          textStyle: { fontSize: 18, fontWeight: "bold" },
          data: ["下井人次"],
          left: 10
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.months,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            name: "下井人次",
            nameTextStyle: { fontSize: 18 },
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
            //             max: 500
          }
        ],
        series: [
          {
            name: "下井人次",
            type: "line",

            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.ljxjrc
          }
        ]
      };
    },
    initzhe2(data) {
      this.zhe3 = {
        title: {
          text: "单耗情况分析",
          textStyle: { fontSize: 25 },

          //           subtext: "数据来自西安兰特水电测控技术有限公司",
          left: "center",
          align: "right",
          bottom: "auto",
          padding: [20, 0, 0, 0]
        },
        grid: {
          bottom: 80,
          right: "5%"
        },

        tooltip: {
          trigger: "axis",
          textStyle: { fontSize: 20 },
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765"
            }
          }
        },
        legend: {
          itemHeight: 15,
          itemWidth: 25,
          textStyle: { fontSize: 18, fontWeight: "bold" },
          data: [
            "当月单耗（度/吨）",
            "近一年单耗均值（度/吨）",
            "同区域煤矿单耗均值（度/吨）"
          ],
          left: 10
        },

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: data.months,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
          }
        ],
        yAxis: [
          {
            //             name: "下井人次",
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20
              }
            }
            //             max: 500
          }
        ],
        series: [
          {
            name: "当月单耗（度/吨）",
            type: "line",

            itemStyle: { color: "#043C8C" },
            lineStyle: {
              width: 3,
              color: "#043C8C"
            },
            emphasis: {
              focus: "series"
            },

            data: data.dydh
          },
          {
            name: "近一年单耗均值（度/吨）",
            type: "line",

            itemStyle: { color: "#00e500" },
            lineStyle: {
              width: 3,
              color: "#00e500"
            },
            emphasis: {
              focus: "series"
            },

            data: data.jyn
          },
          {
            name: "同区域煤矿单耗均值（度/吨）",
            type: "line",

            itemStyle: { color: "#fc7500" },
            lineStyle: {
              width: 3,
              color: "#fc7500"
            },
            emphasis: {
              focus: "series"
            },

            data: data.tqy
          }
        ]
      };
    },
    initData() {
      this.request({
        url: "data/getData/3.1",
        method: "get"
      }).then(data => {
        this.table.data = data.data;
      });
    }
  }
};
</script>
<style lang="less" scoped>
#cqd /deep/ ::-webkit-scrollbar-thumb {
  background-color: #dddddd !important;
}
/deep/.el-dialog .el-dialog__body {
    height: 70vh !important;
    overflow: auto !important;
}
</style>